<template>
    <page-view class="shop-car-page">
        <page-header :show-back="true" title="购物车"></page-header>
        <div class="content-box">
            <swipe-cell v-for="(item,index) in shopCarList" :key="index">
                <div class="content-item" slot="content">
                    <div class="img-box">
                        <img v-lazy="baseURL+item.img" alt="">
                    </div>
                    <ul class="content">
                        <li>{{item.fname}}</li>
                        <li>销售：{{item.salecount}}</li>
                        <li>价格：{{item.price}}</li>
                    </ul>
                    <div class="right">
                        <span class="iconfont iconjianshao" @click="item.count>1?item.count--:''"></span>
                        <span>{{item.count}}</span>
                        <span class="iconfont icontianjia" @click="item.count++"></span>
                    </div>
                </div>
                <button class="del-btn" @click="delFoods1(item)">删除</button>
            </swipe-cell>
        </div>
        <shop-car-bar></shop-car-bar>
    </page-view>
</template>
<script>
    import {
        mapState,mapActions
    } from "vuex";
    import ShopCarBar from '../components/ShopCarBar.vue';
    export default {
        components: {
            ShopCarBar
        },
        name: "ShopCar",
        computed: {
            ...mapState(["shopCarList"]),
        },
        methods:{
            ...mapActions(["delFoods"]),
            delFoods1(item){
                this.delFoods(item.fid);
            }
        }
    }
</script>
<style lang="scss" scoped>
    .shop-car-page {
        @include flexbox(column);

        .content-box {
            flex: 1;
            overflow: auto;

            .content-item {
                @include flexbox();
                height: 70px;
                padding: 5px;
                border-bottom: 1px solid #ececec;

                .img-box {
                    width: 100px;
                    height: 100%;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .content {
                    flex: 1;
                    @include flexbox(column, space-between);
                    margin-left: 5px;
                    font-size: 12px;

                    >li:nth-child(1) {
                        font-size: 16px;
                        font-weight: bold;
                    }

                    >li:nth-child(2) {
                        color: red;
                    }
                }

                .right {
                    width: 70px;
                    height: 100%;
                    @include flexbox(row, center, center);

                    .iconfont {
                        font-size: 16px;
                    }

                    >span:nth-child(2) {
                        margin: 0 5px;
                        font-size: 14px;
                    }
                }
            }
            .del-btn{
                background-color: red;
                outline: none;
                border: none;
            }
        }
    }
</style>